<template>
  <div class="rightTop2">
    <div class="headerMaintitle">
      <img class="topPic" src="../assets/rightBottom3.png" alt="" />
      <div class="headerText">标题1</div>
    </div>
    <div class="warn">
      <div>
        <span>管道监测点</span>
        <div>{{ appealList.normal }}</div>
      </div>
      <div>
        <span>在线监测</span>
        <div>{{ appealList.warn }}</div>
      </div>
      <div>
        <span>离线监测</span>
        <div>{{ appealList.warn }}</div>
      </div>
    </div>
    <div class="row" style="margin-bottom: 10px">
      <div>
        <div class="content blue">
          <p class="title">压力计</p>
          <p class="num">22</p>
        </div>
        <div class="content yellow">
          <p class="title">流量计</p>
          <p class="num">22</p>
        </div>
      </div>
      <div id="codepie1" class="codepie1"></div>
    </div>
  </div>
</template>
<script>
import "echarts-liquidfill";
export default {
  name: "RightTop2",
  props: {},
  components: {},
  data() {
    return {
      appealList: {
        normal: 0,
        warn: 0,
        transact: 0,
        end: 0,
      },
    };
  },
  computed: {},
  watch: {},
  methods: {},
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {
    const option = {
      backgroundColor: "#00000000",
      series: [
        {
          type: "liquidFill",
          radius: "88%",
          center: ["50%", "50%"],

          data: [0.44, 0.44], // data个数代表波浪数
          amplitude: 3,

          // 图形样式
          itemStyle: {
            opacity: 1, // 波浪的透明度
            shadowBlur: 0, // 波浪的阴影范围
          },

          backgroundStyle: {
            color: {
              type: "radial", // 径向渐变
              x: 0.5, // 圆心坐标（中心）
              y: 0.5,
              r: 0.8,
              colorStops: [
                {
                  offset: 1,
                  color: "rgba(133, 255, 250, 0.4)",
                },
                {
                  offset: 0,
                  color: "rgba(133, 255, 255,0)",
                },
              ],
              globalCoord: false,
            },
          },
          color: [
            "rgba(65, 178, 220, 0.5)",
            {
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(39, 211, 255, 1)", // 下
                },
                {
                  offset: 0.5,
                  color: "rgba(39, 211, 255, 1)", // 下
                },
                {
                  offset: 1,
                  color: "rgba(42, 124, 246, 1)",
                },
              ],
            },
          ],
          label: {
            show: true,
            fontSize: 28,
            color: "#ffffff",
            textShadowColor: "#000841",
            textShadowBlur: 10,
            lineHeight: 50,
            textAlign: "center",
            formatter: (params) => {
              return `${(params.value * 100).toFixed(1)}%\n在线率`;
            },
          },
          outline: {
            borderDistance: 2,
            itemStyle: {
              borderWidth: 2,
              borderColor: "rgba(39, 215, 238, 0.2)",
            },
          },
        },
      ],
    };
    const pie = this.$echarts.init(document.getElementById("codepie1"));
    console.log(document.getElementById("codepie1"));
    pie.setOption(option);
  },
  updated() {},

  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
};
</script>
<style lang="less" scoped>
.rightTop2 {
  margin-top: 70px;
  position: relative;
}
.warn {
  margin: 23px 10px 20px;
  height: 98px;
  display: flex;
  & > div {
    height: 100%;
    margin-right: 12px;
    background-image: url("../assets/leftWarn.png");
    background-size: 100% 100%;
    flex: 1;
    display: flex;
    color: #ffffff;
    align-items: center;
    justify-content: center;
    span {
      font-size: 20px;
      margin-left: 12px;
      margin-right: 38px;
    }
    div {
      font-weight: bold;
      font-size: 28px;
    }
  }
  & > div:last-child {
    margin-left: 12px;
    margin-right: 0;
  }
}
.row {
  padding: 0px 28px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  .content {
    text-align: center;
    width: 340px;
    height: 100px;
    margin: 14px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url("../assets/box2.png");
    background-size: 100% 100%;
    .title {
      font-size: 24px;
      font-weight: 500;
      color: #ffffff;
      margin-right: 50px;
    }
    .num {
      font-size: 32px;
      font-weight: 600;
      color: #fed52f;
    }
    p {
      margin: 0;
    }
  }
}
.codepie1 {
  width: 240px;
  height: 240px;
  margin: 10px 20px 10px 0;
}
</style>
